import { render } from '@knno/jsx';
import SVGApp from '@mdi/svg/svg/apps.svg';
import SVGForm from '@mdi/svg/svg/form-textbox.svg';
import { FoldableMenu, Router, RouterView, type Rule } from './imports';
import { ButtonPage } from './pages/buttons';
import { CalendarPage } from './pages/calendar';
import { DialogPage } from './pages/dialog';
import { FilesPage } from './pages/files';
import { FoldablePage } from './pages/foldable';
import { FormPage } from './pages/formPage';
import { GridPage } from './pages/grid';
import { GridInputPage } from './pages/gridInputPage';
import { InputsPage } from './pages/inputs';
import { LayoutPage } from './pages/layout';
import { ListPage } from './pages/list';
import { ListInputPage } from './pages/listInputPage';
import { ReorderListPage } from './pages/listReorder';
import { NavViewPage } from './pages/navView';
import { PaginatorPage } from './pages/pager';
import { PickerPage } from './pages/picker';
import { PopupPage } from './pages/popups';
import { PulldownPage } from './pages/pulldown';
import { RichEditPage } from './pages/richedit';
import { RollerPage } from './pages/roller';
import { SelectPage } from './pages/select';
import { SplitterPage } from './pages/splitBar';
import { TabPage } from './pages/tab';
import { TablePage } from './pages/table';
import { TagPage } from './pages/tag';
import { TextareaPage } from './pages/textarea';
import { TopBar } from './topBar';

const mainRouter = [
	{
		icon: SVGApp,
		key: 'component',
		label: '表单常用组件',
		children: [
			{
				key: 'button',
				label: '按钮',
				component: () => <ButtonPage />,
			},
			{
				key: 'input',
				label: '输入框',
				component: () => <InputsPage />,
			},
			{
				key: 'textarea',
				label: '多行文本输入框',
				component: () => <TextareaPage />,
			},
			{
				key: 'select',
				label: '选择框',
				component: () => <SelectPage />,
			},
			{
				key: 'tag',
				label: '标签选择框',
				component: () => <TagPage />,
			},
			{
				key: 'calendar',
				label: '日历',
				component: () => <CalendarPage />,
			},
			{
				key: 'files',
				label: '文件上传',
				component: () => <FilesPage />,
			},
			{
				icon: SVGForm,
				key: 'form',
				label: '表单',
				component: () => <FormPage />,
			},
			{
				key: 'layout',
				label: '网格布局',
				component: () => <LayoutPage />,
			},
		],
	},
	{
		icon: SVGApp,
		key: 'table',
		label: '表格组件',
		children: [
			{
				key: 'table',
				label: '表格',
				component: () => <TablePage />,
			},
			{
				key: 'grid',
				label: '数据表格',
				component: () => <GridPage />,
			},
			{
				key: 'list',
				label: '数据列表',
				component: () => <ListPage />,
			},
			{
				key: 'reorderList',
				label: '排序列表',
				component: () => <ReorderListPage />,
			},
		],
	},
	{
		icon: SVGApp,
		key: 'other',
		label: '其它组件',
		children: [
			{
				key: 'pulldown',
				label: '下拉刷新',
				component: () => <PulldownPage />,
			},
			{
				key: 'dialog',
				label: '对话框',
				component: () => <DialogPage />,
			},
			{
				key: 'popup',
				label: '弹出层',
				component: () => <PopupPage />,
			},
			{
				key: 'tab',
				label: '页签',
				component: () => <TabPage />,
			},
			{
				key: 'paginator',
				label: '分页器',
				component: () => <PaginatorPage />,
			},
			{
				key: 'navigator',
				label: '导航器',
				component: () => <NavViewPage />,
			},
			{
				key: 'roller',
				label: '滚轮选择',
				component: () => <RollerPage />,
			},
			{
				key: 'picker',
				label: '选择器',
				component: () => <PickerPage />,
			},
			{
				key: 'splitter',
				label: '分割条',
				component: () => <SplitterPage />,
			},
			{
				key: 'richEditor',
				label: '富文本编辑',
				component: () => <RichEditPage />,
			},
			{
				key: 'foldable',
				label: '可折叠组件',
				component: () => <FoldablePage />,
			},
			{
				key: 'gridInput',
				label: '表格输入',
				component: () => <GridInputPage />,
			},
			{
				key: 'listInput',
				label: '列表输入',
				component: () => <ListInputPage />,
			},
		],
	},
];

interface MenuItem {
	key: string;
	label: string;
	children?: MenuItem[];
	component?: () => Node;
}

function menuToRules(items: MenuItem[], parent: string): Rule[] {
	return items.flatMap((item) => {
		const path = parent + '/' + item.key;
		if (item.component) {
			return [
				{
					path,
					component: item.component,
				},
			];
		} else if (item.children) {
			return menuToRules(item.children, path);
		} else return [];
	});
}

export const rules = menuToRules(mainRouter, '');

function Main() {
	let menu: FoldableMenu;
	let router: RouterView;
	function onHashChange() {
		menu.setSelectedKey(location.hash);
		router.setPath(location.hash);
	}
	return (
		<main style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
			<TopBar
				onRefresh={() => {
					render(Main, '#root');
				}}
			/>
			<div style={{ height: 0, flex: 1, display: 'flex', alignItems: 'stretch' }}>
				<FoldableMenu
					items={mainRouter}
					ref={(m) => (menu = m)}
					selectedKey={location.hash.substring(2)}
					singleGroupMode
					style={{ width: '15em', flexShrink: 0 }}
					onMenuItemClick={(item, path) => {
						Router.push('/' + path);
					}}
					onConnected={() => {
						window.addEventListener('hashchange', onHashChange);
						onHashChange();
					}}
					onDisconnected={() => {
						window.removeEventListener('hashchange', onHashChange);
					}}
				/>
				<RouterView
					ref={(r) => (router = r)}
					rules={rules}
					style={{ padding: '2em', flex: 1, overflow: 'auto' }}
				/>
			</div>
		</main>
	);
}
render(Main, '#root');
